<template>
    <div class="header-swiper">
   <swiper :options="swiperOption">
    <!-- slides -->
    <swiper-slide v-for='item in swiperList' :key="item.id">
       <img :src="item.imgUrl" >
    </swiper-slide>
    <div class="swiper-pagination"  slot="pagination"></div>
  </swiper>
    </div>
</template>
<script type="text/javascript">
  export default{
      props:['swiperList'],
      data(){
          return {            
              swiperOption:{
                  pagination:{
                      el:'.swiper-pagination'
                  },
                  loop:true
              }
          }
      }
  }
</script>
<style type="text/css" scoped lang='stylus'>
 .header-swiper{
     background :#ccc;
     height :0;
     padding-bottom :26.67%;
 }
 .header-swiper img{
     width: 100%;
     height: 100% ;
 }
 .header-swiper >>>.swiper-pagination-bullet-active{
     background :#fff;
 }
</style>